<script type="text/javascript">
var options = {
	axis: "0 0 1 1", // Where to put the labels (trbl)
	axisxstep: 6, // How many x interval labels to render (axisystep does the same for the y axis)
	axisxlables: ['Mon', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
	axisystep: 25,
	shade:false, // true, false
	smooth:true, //曲线
	symbol:"circle"
};

$(function () {
	
	// Make the raphael object
	var r = Raphael("chartHolder"); 
	
	var lines = r.linechart(
		20, // X start in pixels
		20, // Y start in pixels
		600, // Width of chart in pixels
		400, // Height of chart in pixels
		[0,1,2,3,4,5,6], // Array of x coordinates equal in length to ycoords
		[[29,27,25,21,19,17,16],[18,16,16,13,13,12,13]], // Array of y coordinates equal in length to xcoords
		options // opts object
	).hoverColumn(function () {
        this.tags = r.set();
		//配合样式2
// 		var box_x = this.x, box_y = 30,
// 			box_w = 50, box_h = 35;
// 		if (box_x + box_w > r.width) box_x -= box_w;
// 		var box = r.rect(box_x,box_y,box_w,box_h).attr({stroke: "#f00", "stroke-width": 2, r:5});
// 		this.tags.push(box);

        for (var i = 0; i < this.y.length; i++) {
			//样式1
        	this.tags.push(r.blob(this.x, this.y[i], this.values[i]+"℃").insertBefore(this).attr([{ fill: "#FFBFCE", stroke: "#000"}, { fill: this.symbols[i].attr("fill") }]));
        	//样式2
//         	var t = r.text(box_x+20, box_y+10 + i*16,this.values[i]+"℃").attr({fill: this.symbols[i].attr("fill")})
			//样式3
//         	var t = r.tag(this.x, this.y[i], this.values[i]+"℃", 10, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]);
//         	this.tags.push(t);
        }
    }, function () {
        this.tags && this.tags.remove();
    });

    lines.symbols.attr({ r: 6 });
});
</script>
<div><span style="font-size: 30px;font-weight: bold;">一周天气</span></div>
<div id="chartHolder" style="width: 650px;height: 450px"></div>
